<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: inline-block;
        /* 将 span 元素设置为行内块级元素，可设置宽高 */
        border-radius: 50%;
        /* 设置边框半径为 50%，使其变为圆形 */
        height: 100px;
        /* 设置高度为 100 像素 */
        width: 100px;
        /* 设置宽度为 100 像素 */
        opacity:1;
        /* 设置不透明度为 0.2，使其半透明 */
      }
      .light {
        opacity: 1;
        /* 设置拥有 light 类的元素不透明度为 1，完全不透明 */
      }
      div span{
        background-color:#ccc;
      }
      .container {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div id="d1">  <span id="red" class="light"></span>
          <!-- 创建一个 id 为 red 且带有 light 类的圆形 span 元素，背景为红色且完全不透明 -->
          <span id="yellow"></span>
          <!-- 创建一个 id 为 yellow 的圆形 span 元素，背景为黄色且半透明 -->
          <span id="green"></span>
          <!-- 创建一个 id 为 green 的圆形 span 元素，背景为绿色且半透明 -->
      </div>
      <div id="d2">  <span id="red" class="light"></span>
        <!-- 创建一个 id 为 red 且带有 light 类的圆形 span 元素，背景为红色且完全不透明 -->
        <span id="yellow"></span>
        <!-- 创建一个 id 为 yellow 的圆形 span 元素，背景为黄色且半透明 -->
        <span id="green"></span>
        <!-- 创建一个 id 为 green 的圆形 span 元素，背景为绿色且半透明 -->
    </div>
    <div id="d3">  <span id="red" class="light"></span>
      <!-- 创建一个 id 为 red 且带有 light 类的圆形 span 元素，背景为红色且完全不透明 -->
      <span id="yellow"></span>
      <!-- 创建一个 id 为 yellow 的圆形 span 元素，背景为黄色且半透明 -->
      <span id="green"></span>
      <!-- 创建一个 id 为 green 的圆形 span 元素，背景为绿色且半透明 -->
  </div>
      <p id="sp" style="font-size: 50px; font-weight: bold">1</p></div>
    </div>
  </body>
  <script src="/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      var maxS = 5;
      // 定义变量 maxS 并初始化为 10，表示最大秒数
      var currentlight = "red";
      // 定义变量 currentlight 并初始化为 "red"，表示当前亮着的灯颜色为红色
      function changeLight(from, to, s) {
        if (maxS > 0) {
          return;
        }
        maxS = s;
        currentlight = to;
        //document.getElementById(from).classList.remove("light");
        $("#" + from).removeClass("light");
        // document.getElementById(to).classList.add("light");
        $("#" + to).addClass("light");
      }
      /*
      window.setInterval(function () {
        if (currentlight == "red") {
          changeLight("red", "yellow", 4);
        }
        // 如果当前亮着的灯是红色，调用 changeLight 函数切换到黄色，时间为 8 秒
        if (currentlight == "yellow") {
          changeLight("yellow", "green", 3);
        }
        // 如果当前亮着的灯是黄色，调用 changeLight 函数切换到绿色，时间为 3 秒
        if (currentlight == "green") {
          changeLight("green", "red", 8);
        }
        // 如果当前亮着的灯是绿色，调用 changeLight 函数切换到红色，时间为 8 秒
        maxS = maxS - 1;
        // 每秒钟将 maxS 减 1
        $("#sp").text(maxS);
        // 更新段落元素的文本内容为当前剩余秒数
      }, 1000);
      */

    });
    
   
  </script>
</html>
